<template>
	<!-- 搜索框开始 -->
	<view class="search-title">
		<view class="search-nav">
			<!-- 首页 -->
			<view class="search-home" @click="homeClick">
				<view class="search-shouye">首页</view>
			</view>
			<!-- 输入框 -->
			<view class="search-ipt">
				<text class="iconfont icon-search" style="font-size: 20rpx;"></text>
				<input class="input" type="text" placeholder="请输入搜索内容" v-model="name" />
			</view>
			<!-- 搜索 -->
			<view class="search-btn" @click="searchClick">
				搜索
			</view>
		</view>
	</view>
	<!-- 搜索框结束 -->
</template>

<script>
	export default {
		// 接受父组件传递过来的值
		props: ['name'],
		data() {
			return {

			};
		},
		onLoad() {},
		methods: {
			// 点击首页回到index页面
			homeClick() {
				this.$emit('homePage')
			},
			// 点击搜索
			searchClick() {
				this.$emit('searchBtn')
			}
		}
	}
</script>

<style lang="scss">
	.search-title {
		width: 100%;
		height: 120rpx;
		padding: 30rpx 30rpx;
		display: flex;
		background-color: #fdd201;
		.search-nav {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;

			.search-home {
				width: 120rpx;
				height: 100%;
				color: #888;
				background-color: #e5e2e5;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				margin-right: -3rpx;
				.search-shouye {
					width: 100%;
					border-right: 1px solid #888;
					z-index: 999;
					text-align: center;
				}
			}

			.search-ipt {
				width: 450rpx;
				height: 100%;
				background-color: #e5e2e5;
				display: flex;
				align-items: center;
				.input {
					width: 100%;
					height: 100%;
				}
			}
			.search-btn {
				width: 120rpx;
				height: 100%;
				color: #fff;
				margin-right: 8rpx;
				background-color: #00b26a;
				border-top-right-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;

			}
		}

	}
</style>
